<template>
  <div class="ESports">
    <div>
      <p style="background-color: #BDC4CE;height: 80px;"></p>
      <div>

        <div class="left">
          <div>
            <label @click="getact(0)" :class="{active:avitvs==0}">赛事</label>
            <label @click="getact(1)" :class="{active:avitvs==1}">比赛</label>
          </div>
          <div>
            <div style="padding: 30px;" v-if="avitvs==0">
              <div class="e_tltle">CSGO国服[综合]激流大行动今日登场：枪械、地图修改，投掷物可丢弃！新模式、皮肤</div>
              <p class="e_p">全新游戏模式、枪械地图改变、全新大行动任务玩法、全新角色皮肤、全新地图系列皮肤、全新武器箱、全新印花布章探员等等等等！马上登录游戏购买通行证，体验激流大行动的冲浪快感~</p>
              <div class="e_tltle">CSGO国服[综合]PGL斯德哥尔摩Major将于10月26日开战 完美世界电竞全程中文制作</div>
              <p class="e_p">PGL斯德哥尔摩Major最终敲定，将于10月26日至11月7日在瑞典斯德哥尔摩开战！来自六大赛区的24支顶级战队云集瑞典，争夺200万美元总奖金以及CS:GO至高荣誉！</p>
            </div>
            <div style="padding: 30px;" v-if="avitvs==1">
              <div class="e-s"><span style="list-style: 18px;">K甲</span>:<span>A组</span></div>
              <div class="e-s"><span style="list-style: 18px;">K甲</span>:<span>B组</span></div>
              <div class="e-s"><span style="list-style: 18px;">K甲</span>:<span>C组</span></div>
              <div class="e-s"><span style="list-style: 18px;">K甲</span>:<span>D组</span></div>
              <div class="e-s"><span style="list-style: 18px;">K甲</span>:<span>E组</span></div>
              <div class="e-s"><span style="list-style: 18px;">K甲</span>:<span>F组</span></div>
            </div>
          </div>
          <p class="left-tips"><a @click="goto('https://www.csgo.com.cn/match')">查看以上赛事详情</a></p>
        </div>
        <div class="right">
          <div><a @click="goto('https://pnl.pwesports.cn/')"><img src="../assets/468b993d-23c3-435d-a6b2-dc7b9f12ff23.png" ></a></div>
          <div><a @click="goto('https://www.csgo.com.cn/article/details/20210917/225180.html')"><img src="../assets/4514b0fb-38df-4619-b0e8-10eed4f64989.png"></a></div>
          <p class="right-tips"><a @click="goto('https://www.csgo.com.cn/match')">查看更多赛事详情</a></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'ESports',
 data () {
    return {
      avitvs:0
    }
  },
  methods: {
    getact(e){
      this.avitvs=e
    },
    goto(url){
       window.open(url,'_blank')
    }
  }
}
</script>

<style scoped>
  .e-s{
    font-size: 24px;
    margin-bottom: 10px;
  }
  .e-s span{
    /* font-size: 18px; */
  }
  .e_tltle{
    text-align: justify;
    font-size: 18px;
  }
  .e_p{
    margin-top: 5px;
    font-size: 14px;
    color: #999999;
    text-align: justify;
    margin-bottom: 15px;
  }
.ESports{
  background-color: #D2D9E1;
  width: 100%;
}
.ESports >div{
  background-image: url(../assets/acsdbg.jpg);
  max-width: 1920px;
  margin: 0 auto;
  background-size: 100% 100%;
}
.ESports >div>div{
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin:  -72px auto 0;
}
.left {
  width: 660px;
}
.left >div:first-child{
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  height: 72px;
  padding: 0 25px;
  background-color: #a8b0bd;
  line-height: 72px;
}
.left-tips{
  width: 100%;
  height: 30px;
  background-color: #a8b0bd;
  line-height: 30px;
  font-size: 14px;
  color: #dcecff;
  cursor: pointer;
}
.left-tips:hover{
  color: #FFFFFF;
}
.right-tips:hover{
  color: #FFFFFF;
}
.right-tips{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background-color: #a8b0bd;
  line-height: 30px;
  font-size: 14px;
  color: #dcecff;
  cursor: pointer;
}
.left >div:first-child label{
      line-height: 72px;
      padding: 0 54px;
      float: left;
      cursor: pointer;
}
.left >div:first-child label:hover{
  color: #252935;
}
.left >div:nth-child(2){
  height: 335px;
  margin: 27px 0 0;
  background-color: #ccd2da;
}
.left .active{
  color: #252935;
}
.right{
  width: 508px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative
}
.right>div{
  width: 248px;
  height: 460px;
  overflow: hidden;
}
.right>div:hover img{
  transform: scale(1.1);
  transition: 1s;
}
img{
  width: 100%;
  height: 100%;
}
</style>
